<template>
  <el-container>
    <el-header>
      <div class="head">
        <img style="width: 111.6px; height: 60px" src="../images/logo.jpg" />
        <div style="font-size: 18px; margin-left: 50px">
          <label>欢迎您！ヾ(≧▽≦*)o ！ 请创建新的账号</label>
        </div>
      </div>
    </el-header>
    <div
      style="
        height: 1px;
        background-color: lightgrey;
        margin-top: 20px;
        opacity: 0.6;
      "
    ></div>
    <div class="allmsg">
      <div class="leftmsg">
        <div style="font-size: 26px; margin-left: 70px; margin-top: 40px">
          <b>创建新用户</b>
        </div>
        <br />
        <div
          style="
            height: 1px;
            background-color: lightgrey;
            margin-top: 20px;
            opacity: 0.4;
          "
        ></div>
        <div style="font-size: 23px; margin-left: 100px; margin-top: 30px">
          <b>注册信息</b>
        </div>
        <br />
        <el-form
          ref="form"
          :model="user"
          label-width="100px"
          style="margin-left: 70px; margin-top: 30px"
        >
          <el-form-item label="头像：">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8008/user-service/user/setPhoto"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="UFunID：">
            <el-input style="width: 50%" v-model="user.account"></el-input>
          </el-form-item>
          <el-form-item label="密码：">
            <el-input
              v-model="user.password"
              type="password"
              style="width: 50%"
              showpassword
            ></el-input>
          </el-form-item>
          <el-form-item label="性别：">
            <el-select v-model="user.sex" placeholder="请选择">
              <el-option
                v-for="item in [{value:'男',label:'男'},{value:'女',label:'女'}]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="真实姓名：">
            <el-input style="width: 50%" v-model="user.realName"></el-input>
          </el-form-item>
          <el-form-item label="手机号码：">
            <el-input style="width: 50%" v-model="user.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱：">
            <el-input style="width: 50%" v-model="user.email"></el-input>
          </el-form-item>
          <el-form-item label="支付账号：">
            <el-input style="width: 50%" v-model="user.payAccount"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-check"
              type="primary"
              circle
              style="float: right; margin-right: 280px; margin-top: 30px"
              @click="register"
            ></el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="rightmsg">
        <div style="font-size: 22px; margin-left: 100px">
          <b>客户服务中心</b>
        </div>
        <br />
        <div style="font-size: 18px; margin-left: 100px">
          <label class="el-icon-phone-outline"
            >&nbsp;&nbsp;联系电话：000 000 0000</label
          >
        </div>
        <br />
        <div style="font-size: 18px; margin-left: 100px">
          <label class="el-icon-message">&nbsp;&nbsp;通过e-mail联系我们</label>
        </div>
        <br />
        <div style="font-size: 22px; margin-left: 100px">
          <b>关于您的优坊账号</b>
        </div>
        <br />
        <div style="font-size: 18px; margin-left: 100px">
          <label class="el-icon-search">查询您的网上购买记录及历史订单</label>
        </div>
        <br />
        <div style="font-size: 18px; margin-left: 100px">
          <label class="el-icon-notebook-1">管理您的个人信息</label>
        </div>
        <br />
        <div style="font-size: 18px; margin-left: 100px">
          <label class="el-icon-link"
            >获得最新的优坊电子报以及最新的商品信息</label
          >
        </div>
        <br />
        <div style="font-size: 18px; margin-left: 100px">
          <label class="el-icon-edit-outline">储存您的购物袋</label>
        </div>
        <br />
      </div>
    </div>
  </el-container>
</template>

<script>
import {registerUser} from "@/api/user.js"
export default {
  data() {
    return {
      imageUrl: "",
      table: false,
      user: {},
    };
  },
  methods: {
    handleAvatarSuccess(res) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.imageUrl = res.data;
      console.log(res.data);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (file.type != "image/jpeg" && file.type != "image/png") {
        this.$message.error("上传头像图片只能是 JPG 或者PNG格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    register(){
      this.user.photo=this.imageUrl
      registerUser(this.user).then(res=>{
        if(res.data.code=="0000"){
          this.$message.success("注册成功")
          this.$router.push("/")
        }else{
          this.$message.error("用户名已存在！")
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.el-header {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding-bottom: 20px;
}
.head {
  display: fixed;
  height: 60px;
  text-align: left;
}
.head > div {
  float: left;
}
.head img {
  float: left;
  padding: 0;
  margin: 0;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.allmsg {
  display: flex;
  height: 1000px;
}
.leftmsg {
  flex: 1;
  margin-left: 30px;
  width: 600px;
  float: left;
  margin-top: 50px;
  height: 100%;
  background: whitesmoke;
}
.rightmsg {
  flex: 1;
  float: left;
  margin-top: 120px;
  height: 500px;
  background: white;
}

.avatar-uploader .el-upload {
  border: 1px solid red;
  position: relative;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #409eff;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>


